<template>
  <div>
    <div class="Login" :style="backgroundImage">
      <div class="login_box">
        <!-- 表单登陆区域 -->
        <h1 style="color: white">LOGIN</h1>
        <div class="aa">
          <el-form
            label-width="80px"
            ref="loginFormRef"
            :model="loginForm"
            class="login_form"
            :rules="loginFormRules"
          >
            <el-form-item label="账号" style="color: white" prop="username">
              <el-input v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" style="color: white" prop="password">
              <el-input
                type="password"
                v-model="loginForm.password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item class="btcss">
              <el-button type="info" @click="login(loginForm)">登录</el-button>
              <el-button type="info" @click="resetLoginForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- <el-button type="info" @click="changeBg">更换背景</el-button> -->
    </div>
  </div>
</template>

<script>
// import bg1 from '../assets/bg1.jpeg'
import allBackgroundImages from "../images";
export default {
  data() {
    return {
      allBackgroundImages,
      // bg:bg1,
      labelPosition: "right",
      loginForm: {
        username: "admin",
        password: "123456",
      },
      // 表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          // { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        // 验证密码是否合法
        password: [
          // { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 10,
            message: "长度在 6 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 点击重置按钮,重置登录表单
    resetLoginForm() {
      // console.log(this),
      this.$refs.loginFormRef.resetFields();
    },

    login() {
      this.$refs.loginFormRef.validate(async valid =>{
        if(!valid) return;
        const {data:res} = await this.$http.post("login",this.loginForm);
        if(res.meta.status !== 200) return this.$message.error("登陆失败");
        this.$message.success("登陆成功");
        window.sessionStorage.setItem("token",res.data.token)
        this.$router.push("/hello");
        
      });
    }
  },
  computed: {
    backgroundImage() {
      // 根据背景图数组的长度随机选择索引
      const randIndex = Math.floor(
        Math.random() * this.allBackgroundImages.length
      );
      return {
        // 获取对应的图片资源并将其设置到`background-image`属性上
        backgroundImage: `url(${this.allBackgroundImages[randIndex]})`,
      };
    },
  },
};
</script>

<style scoped>
/* .login_img{
    width: 150px;
    height: 150px;
} */
.Login {
  /* background-image: url('../assets/bg1.jpeg'); */
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
.login_box {
  margin: 0 auto;
  margin-top: 150px;
  padding: 10px 50px;
  background-color: #00000090;
  width: 400px;
  height: 300px;
  text-align: center;
  border-radius: 10px;
  opacity: 0.85;
}
.btcss {
  margin-left: -80px;
}
/* 这句话可以完美讲elment自带的属性干掉 ！important就是让他优先级变高 */
.aa >>> .el-form-item__label {
  /* margin-left:0px !important; */
  color: white !important;
}
</style>